<template>
  <el-row>
    <el-col :span="6" v-for="(item, index) in goodsDatalist" style="padding:10px">
      <el-card shadow="hover">
        <el-row :gutter="10">
          <el-col :span="12">
            <img :src="require('../assets/images/' + item.imgurl)" width="100%"
              style="position: relative; cursor: pointer;" @click="handledetails(index)">
          </el-col>
          <el-col :span="12" style="font-family: '仿宋'; font-size: 14px;">
            <div style="text-align: center;font-size: 12px;font-weight: bold">{{ item.goods_name }}</div>
            <div style="margin-top: 15px;">品牌:<el-tag>{{ item.brand }}</el-tag></div>
            <div style="margin-top: 10px;">类别:
              <el-tag v-if="item.category === '1'">食品类</el-tag>
              <el-tag v-else-if="item.category === '2'">服装类</el-tag>
              <el-tag v-else-if="item.category === '3'">日用品类</el-tag>
              <el-tag v-else-if="item.category === '4'">家具类</el-tag>
              <el-tag v-else-if="item.category === '5'">家用电器类</el-tag>
              <el-tag v-else-if="item.category === '6'">纺织品类</el-tag>
              <el-tag v-else-if="item.category === '7'">五金电料类</el-tag>
              <el-tag v-else-if="item.category === '8'">厨具类</el-tag>
            </div>
            <div style="margin-top: 10px;">剩余数量:<el-tag>{{ item.num }}</el-tag></div>
            <div style="margin-top: 8%;" class="details" @click="handledetails(index)">详情</div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 4%">
          <el-col :span="19">
            <el-button type="primary" size="small" style="float: right;" @click="Cart()">加入购物车</el-button>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" size="small" style="float: right;" @click="handleAdd(item)">购买</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <el-dialog v-model="dialogVisible" title="商品详情" width="600px" style="padding-bottom: 20px;">
    <div style="text-align: center;font-weight: bold;font-size: 20px">{{ goodsDatalist[goodsindex].goods_name }}
    </div>
    <el-row :gutter="10">
      <el-col :span="12" style="margin-top: 4%">
        <img :src="require('../assets/images/' + goodsDatalist[goodsindex].imgurl)" width="100%"
          style="position: relative;">
      </el-col>
      <el-col :span="12" style="font-family: '仿宋'; font-size: 16px;">
        <div style="margin-top: 20px;">品牌：{{ goodsDatalist[goodsindex].brand }}</div>
        <div style="margin-top: 10px;">类别:
          <el-tag v-if="goodsDatalist[goodsindex].category === '1'">食品类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '2'">服装类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '3'">日用品类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '4'">家具类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '5'">家用电器类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '6'">纺织品类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '7'">五金电料类</el-tag>
          <el-tag v-else-if="goodsDatalist[goodsindex].category === '8'">厨具类</el-tag>
        </div>
        <div style="margin-top: 10px;">销售商：{{ goodsDatalist[goodsindex].seller }}</div>
        <div style="margin-top: 10px;">生产商：{{ goodsDatalist[goodsindex].manufacturer }}</div>
        <div style="margin-top: 10px;">发售日期：{{ goodsDatalist[goodsindex].release_date }}</div>
        <div style="margin-top: 10px;">价格:
          <el-tag type="success">{{ goodsDatalist[goodsindex].price }}元</el-tag>
        </div>
        <div style="margin-top: 10px;">剩余数量：{{ goodsDatalist[goodsindex].num }}</div>
        <div style="margin-top: 10px; line-height: 24px;">描述：{{ goodsDatalist[goodsindex].description }}</div>
      </el-col>
    </el-row>
  </el-dialog>
  <BuyDialog :title="title" :Goodsbuy="goodsbuy" :dialogFormVisible="dialogFormVisible"
    @close="dialogFormVisible = false" @update_dialogFormVisable="() => {
      dialogFormVisible = false
    }" />
</template>

<script setup lang="ts">
import { getGoodsListApi } from '@/api/common';
import { onMounted, ref } from 'vue'
import BuyDialog from '../components/BuyDialog.vue'
import { ElMessage } from 'element-plus';
const goodsDatalist = ref([{
  goods_id: null,
  goods_name: null,
  brand: null,
  category: null,
  seller: null,
  manufacturer: null,
  release_date: null,
  price: null,
  num: null,
  imgurl: '1.jpg',
  description: null
}])
const getGoodsList = () => {
  getGoodsListApi().then(res => {
    goodsDatalist.value = res.data.data;
  })
}
onMounted(() => {
  getGoodsList()
})
const dialogVisible = ref(false)
const goodsindex = ref();
const handledetails = (index: any) => {
  dialogVisible.value = true
  goodsindex.value = index
}
var Mock = require("mockjs")
const title = ref('请确认购买信息')
const dialogFormVisible = ref(false)
const goodsbuy = ref({})
const handleAdd = (item: any) => {
  dialogFormVisible.value = true
  goodsbuy.value = {
    goods_id: item.goods_id,
    goods_name: item.goods_name,
    user_name: 'admin',
    name: Mock.mock("@name"),
    phone: Mock.mock(/1\d{10}/),
    address: Mock.mock('@county(true)')
  }
}
const Cart=()=>{
  ElMessage.success("添加成功！");
}
</script>

<style>
.details {
  cursor: pointer;
  color: #409eff;
}

.details:hover {
  color: red;
}
</style>